<template>
	<view class="page">
		<view class="page-nav">
			<u-navbar title="开通记录" leftIconSize="16" leftIconColor="#FFC9AB" :fixed="true" :placeholder="true"
				bgColor="#00152E" :autoBack="true">
			</u-navbar>
		</view>

		<view class="page-top">
			<view class="panel-user-info">
				<view class="bg-box">
					<image src="@/static/vip/vip-index-bg.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="info-top flex-between">
						<view class="info-top-left">
							乐辰生活 <text class="vip">VIP</text>
						</view>
						<view class="info-top-right fit-text" @click="open_xufei()">
						立即续费
						</view>
					</view>
					<view class="info-bottom flex">
						<view class="info-avatar">
							<image :src="mix_user_avatar" mode=""></image>
						</view>
						<view class="info-name ">
							<view class="name">
								LU蒙恩
							</view>
							<view class="desc">
								2024-06-16到期 · VIP月卡
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="page-bottom">
			<view class="main-title">
				开通记录
			</view>
			<view class="record-box">
				<view class="record-list">
					<view class="record-item" v-for="(item,index) in 3">
						<view class="type-box flex-between">
							<view class="label">
								乐辰生活
								<text class="vip">VIP</text>
							</view>
							<view class="value">

							</view>
						</view>
						<view class="info flex-between">
							<view class="label">
								会员到期时间
							</view>
							<view class="value">
								2023-07-10
							</view>
						</view>
						<view class="info flex-between">
							<view class="label">
								会员开通时间
							</view>
							<view class="value">
								2023-06-09 17:20:09
							</view>
						</view>
						<view class="info flex-between">
							<view class="label">
								开通方式
							</view>
							<view class="value">
								微信支付
							</view>
						</view>
					</view>
				</view>
			</view>
			<w_bottom_safe height="120" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				vipList: [],
				current_swiper_index: 0,
				my_info: {
					cost_price: 0,
				},
				nextRule: {},
				//
				//
				//会员等级信息
				vip_info_level: {
					title: '',
					jianjie: '',
					content: '',
				},
				//会员特权信息
				vip_info_tequan: {
					title: '',
					jianjie: '',
					content: '',
				},
				//最高会员级别id
				max_level_id: '',

				//
				richStyle: {
					// 字符串的形式
					p: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;',
					span: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;',
					img: 'vertical-align: bottom;'
				},


				package_list: []
			}
		},
		computed: {

		},

		onLoad() {
			this.setView();
		},
		methods: {
			setView() {
				this.query_user();
				this.query_vip_content();
			},

			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					let data = res.data;
					this.my_info = data;
					this.nextRule = data.nextRule || {};
					let user_current_level_id = data.level
					let user_current_cost = data.costConsume || 0; //累计消费
					// let user_current_cost = data.costJifen || 0;//累计积分
					this.vipList = data.levelRules;
					this.vipList.forEach((v, index) => {
						v.price = parseFloat(v.price);
						v.percent = user_current_cost / v.price * 100 + '%';

						let next_item = this.vipList[index + 1]
						if (next_item) {
							v.next_title = next_item.title
							v.next_total = parseFloat(next_item.price) || 0
						}
					});

					let idList = this.vipList.map(v => v.id)
					this.max_level_id = Math.max(...idList)
					this.current_swiper_index = this.vipList.findIndex(v => v.id == user_current_level_id);

					this.$log('vipList', this.vipList)
					console.log('user_current_level_id', user_current_level_id)
					console.log('current_swiper_index', this.current_swiper_index)
				})
			},

			query_vip_content() {
				//会员等级说明
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'news_detail',
						id: 96, //this.id,
					},
				}).then(res => {
					if (res.code == 200) {
						this.vip_info_level = res.data.info;
					}
				})

				//会员特权说明
				// this.$api({
				// 	url: '/service.php',
				// 	method: 'get',
				// 	data: {
				// 		action: 'news_detail',
				// 		id: 96, //this.id,
				// 	},
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		this.vip_info_tequan = res.data.info;
				// 	}
				// })
			},

			//  路线
			changeSwiper(e) {
				console.log('标记点切换 change', e)
				let index = e.detail.current
			},

			// buyVip() {
			// 	console.log(this.list[this.current].id, '等级id')
			// 	this.$api({
			// 		level_id: this.list[this.current].id
			// 	}, 'money_buyLevel').then(res_pay => {
			// 		if (res_pay.code != 1) {
			// 			this.msg('支付失败');
			// 			return false;
			// 		}
			// 		this.$api(res_pay.data).then(result => {
			// 			if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
			// 				//用户取消支付
			// 				this.msg('取消支付');
			// 				return false;
			// 			} else {
			// 				this.msg('支付成功');
			// 			}
			// 		})
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	// 设置标题左对齐
	.page-nav ::v-deep .u-navbar__content__left {
		// display: none;
	}

	.page-nav ::v-deep .u-navbar__content__title {
		// flex: 1;
		// padding-left: 32rpx;
		// text-align: left;
		// font-family: PingFang SC, PingFang SC;
		// font-weight: 400;
		// font-size: 32rpx;
		color: #FFC9AB;
	}

	.page {
		.page-ctx {}
	}

	.page-top {
		background: #00152E;
		padding: 32rpx;
	}

	.page-bottom {
		margin-top: -35rpx;
		padding: 42rpx 32rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		
		.main-title {
			margin-bottom: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.panel-user-info {
		position: relative;

		.bg-box {
			width: 100%;
			height: 232rpx;
			background: #FFE9C3;
			box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(255, 233, 195, 0.5);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			image {
				width: 100%;
				height: 232rpx;
			}
		}

		.info-box {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 32rpx 24rpx;

			.info-top {
				.info-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #D68D65;

					.vip {
						margin-left: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 36rpx;
						color: #D68D65;
					}
				}

				.info-top-right {
					min-width: 128rpx;
					height: 40rpx;
					background: #00152E;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFE9C3;
				}
			}

			.info-bottom {
				margin-top: 32rpx;

				.info-avatar {
					width: 84rpx;
					height: 84rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 76rpx;
						height: 76rpx;
					}
				}

				.info-name {
					flex: 1;
					overflow: hidden;
					margin-left: 20rpx;

					.name {
						font-family: PingFangSC-Semibold, PingFangSC-Semibold;
						font-weight: normal;
						font-size: 28rpx;
						color: #713005;
					}

					.desc {
						margin-top: 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #B18158;
					}

				}
			}
		}
	}


	.record-box {
		.record-item {
			margin-bottom: 16rpx;
			padding: 32rpx 24rpx;
			// height: 272rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.type-box {
				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #D68D65;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.info {
				margin-top: 20rpx;
				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #9695A3;
				}
			}
		}
	}
</style>